<template>
  <div
    id="userLayout"
    class="user-layout"
  >
    <div class="user-layout-container">
      <router-view />
    </div>
  </div>
</template>

<script>
import { Route, ResizeHandler } from './mixins';

export default {
  name: 'UserLayout',

  mixins: [Route, ResizeHandler]
};
</script>

<style lang="scss" scoped>
.user-layout {
  background-color: $gray-20;
  padding: 100px 90px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .user-layout-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: $screen-md) {
  .user-layout {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
